<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// Table columns
const columns = [
  { prop: 'id', label: 'ID', width: '80px' },
  { prop: 'name', label: '客户名称' },
  { prop: 'industry', label: '行业' },
  { prop: 'contact', label: '联系人' },
  { prop: 'phone', label: '联系电话' },
  { prop: 'type', label: '客户类型' },
  { prop: 'status', label: '跟进状态' },
  { prop: 'lastContact', label: '最近联系', sortable: true },
  { prop: 'actions', label: '操作', width: '150px' }
];

// Filter form
const filterForm = reactive({
  keyword: '',
  industry: '',
  type: '',
  status: ''
});

// Industry options
const industryOptions = [
  { value: '', label: '全部行业' },
  { value: 'tech', label: '信息技术' },
  { value: 'finance', label: '金融服务' },
  { value: 'mfg', label: '制造业' },
  { value: 'education', label: '教育' },
  { value: 'healthcare', label: '医疗健康' },
  { value: 'retail', label: '零售' },
  { value: 'other', label: '其他' }
];

// Customer type options
const typeOptions = [
  { value: '', label: '全部类型' },
  { value: 'key', label: '重点客户' },
  { value: 'strategic', label: '战略客户' },
  { value: 'regular', label: '普通客户' },
  { value: 'potential', label: '潜在客户' }
];

// Customer status options
const statusOptions = [
  { value: '', label: '全部状态' },
  { value: 'active', label: '活跃' },
  { value: 'inactive', label: '不活跃' },
  { value: 'new', label: '新客户' },
  { value: 'lost', label: '流失' }
];

// Customer data (mock data)
const customerData = ref([
  {
    id: 1001,
    name: '腾讯科技',
    industry: '信息技术',
    contact: '李经理',
    phone: '13800138001',
    type: '重点客户',
    status: '活跃',
    lastContact: '2023-06-15',
    typeClass: 'success',
    statusClass: 'success'
  },
  {
    id: 1002,
    name: '阿里巴巴',
    industry: '信息技术',
    contact: '张总监',
    phone: '13900139002',
    type: '战略客户',
    status: '活跃',
    lastContact: '2023-06-10',
    typeClass: 'primary',
    statusClass: 'success'
  },
  {
    id: 1003,
    name: '中国银行',
    industry: '金融服务',
    contact: '王经理',
    phone: '13700137003',
    type: '重点客户',
    status: '活跃',
    lastContact: '2023-06-05',
    typeClass: 'success',
    statusClass: 'success'
  },
  {
    id: 1004,
    name: '华为技术',
    industry: '信息技术',
    contact: '赵总监',
    phone: '13600136004',
    type: '战略客户',
    status: '活跃',
    lastContact: '2023-05-30',
    typeClass: 'primary',
    statusClass: 'success'
  },
  {
    id: 1005,
    name: '中石油',
    industry: '能源',
    contact: '陈经理',
    phone: '13500135005',
    type: '普通客户',
    status: '不活跃',
    lastContact: '2023-04-20',
    typeClass: 'warning',
    statusClass: 'warning'
  },
  {
    id: 1006,
    name: '上海汽车',
    industry: '制造业',
    contact: '钱总',
    phone: '13400134006',
    type: '重点客户',
    status: '活跃',
    lastContact: '2023-06-02',
    typeClass: 'success',
    statusClass: 'success'
  },
  {
    id: 1007,
    name: '百度',
    industry: '信息技术',
    contact: '孙经理',
    phone: '13300133007',
    type: '战略客户',
    status: '活跃',
    lastContact: '2023-06-08',
    typeClass: 'primary',
    statusClass: 'success'
  },
  {
    id: 1008,
    name: '京东',
    industry: '零售',
    contact: '周总',
    phone: '13200132008',
    type: '普通客户',
    status: '新客户',
    lastContact: '2023-06-01',
    typeClass: 'warning',
    statusClass: 'primary'
  }
]);

// Pagination
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

// Filter customers
const filteredCustomers = ref([]);

const filterCustomers = () => {
  let result = customerData.value;
  
  // Filter by keyword
  if (filterForm.keyword) {
    const keyword = filterForm.keyword.toLowerCase();
    result = result.filter(customer => 
      customer.name.toLowerCase().includes(keyword) || 
      customer.contact.toLowerCase().includes(keyword) || 
      customer.phone.includes(keyword)
    );
  }
  
  // Filter by industry
  if (filterForm.industry) {
    result = result.filter(customer => 
      customer.industry === industryOptions.find(option => option.value === filterForm.industry)?.label
    );
  }
  
  // Filter by customer type
  if (filterForm.type) {
    result = result.filter(customer => 
      customer.type === typeOptions.find(option => option.value === filterForm.type)?.label
    );
  }
  
  // Filter by status
  if (filterForm.status) {
    result = result.filter(customer => 
      customer.status === statusOptions.find(option => option.value === filterForm.status)?.label
    );
  }
  
  filteredCustomers.value = result;
  pagination.total = result.length;
};

// Navigate to customer detail
const viewCustomer = (id) => {
  router.push(`/customers/${id}`);
};

// Handle pagination change
const handleCurrentChange = (currentPage) => {
  pagination.currentPage = currentPage;
};

// Add new customer
const addNewCustomer = () => {
  console.log('Add new customer');
  // Implement new customer logic
};

// Export customer data
const exportData = () => {
  console.log('Export customer data');
  // Implement export logic
};

// Reset filter form
const resetForm = () => {
  filterForm.keyword = '';
  filterForm.industry = '';
  filterForm.type = '';
  filterForm.status = '';
  filterCustomers();
};

// Initialize component
onMounted(() => {
  filterCustomers();
});
</script>

<template>
  <div>
    <div class="page-header">
      <h1 class="page-title">客户列表</h1>
      <p class="page-subtitle">管理和查看客户信息</p>
    </div>
    
    <!-- Filters and actions -->
    <div class="card">
      <div class="card-body">
        <el-form :model="filterForm" inline @submit.prevent="filterCustomers">
          <el-form-item>
            <el-input 
              v-model="filterForm.keyword" 
              placeholder="搜索客户名称/联系人/电话"
              clearable
              @clear="filterCustomers"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          
          <el-form-item>
            <el-select v-model="filterForm.industry" placeholder="行业" clearable @change="filterCustomers">
              <el-option
                v-for="item in industryOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          
          <el-form-item>
            <el-select v-model="filterForm.type" placeholder="客户类型" clearable @change="filterCustomers">
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          
          <el-form-item>
            <el-select v-model="filterForm.status" placeholder="跟进状态" clearable @change="filterCustomers">
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="filterCustomers">筛选</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
        
        <div class="table-actions">
          <el-button type="primary" @click="addNewCustomer">
            <el-icon><Plus /></el-icon>
            添加客户
          </el-button>
          <el-button @click="exportData">
            <el-icon><Download /></el-icon>
            导出数据
          </el-button>
        </div>
      </div>
    </div>
    
    <!-- Customer table -->
    <div class="card">
      <div class="card-body">
        <el-table
          :data="filteredCustomers"
          style="width: 100%"
          border
        >
          <el-table-column
            prop="id"
            label="ID"
            width="80"
          />
          <el-table-column
            prop="name"
            label="客户名称"
            width="180"
          />
          <el-table-column
            prop="industry"
            label="行业"
          />
          <el-table-column
            prop="contact"
            label="联系人"
          />
          <el-table-column
            prop="phone"
            label="联系电话"
          />
          <el-table-column
            prop="type"
            label="客户类型"
          >
            <template #default="scope">
              <span :class="['status-tag', scope.row.typeClass]">
                {{ scope.row.type }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="跟进状态"
          >
            <template #default="scope">
              <span :class="['status-tag', scope.row.statusClass]">
                {{ scope.row.status }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="lastContact"
            label="最近联系"
            sortable
          />
          <el-table-column
            label="操作"
            width="150"
          >
            <template #default="scope">
              <el-button type="primary" size="small" text @click="viewCustomer(scope.row.id)">
                <el-icon><View /></el-icon>
                查看
              </el-button>
              <el-button type="primary" size="small" text>
                <el-icon><Edit /></el-icon>
                编辑
              </el-button>
              <el-dropdown>
                <el-button type="primary" size="small" text>
                  <el-icon><More /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>添加销售机会</el-dropdown-item>
                    <el-dropdown-item>添加联系记录</el-dropdown-item>
                    <el-dropdown-item divided>删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- Pagination -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            background
            layout="total, prev, pager, next"
            :total="pagination.total"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page-header {
  margin-bottom: 24px;
}

.page-title {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
}

.page-subtitle {
  margin: 0 0 16px 0;
  color: var(--text-secondary);
}

.table-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

/* 状态标签样式继承自全局样式 */
</style> 